<template>
  <div class="mapContainer">
    <div class="locale">
      <el-row :gutter="5">
        <el-col :span="12"><el-input :readonly="readonly" v-model="state.locate.longitude" :placeholder="t('map.longitude')"></el-input></el-col>
        <el-col :span="12"><el-input :readonly="readonly" v-model="state.locate.latitude" :placeholder="t('map.latitude')"></el-input></el-col>
      </el-row>
    </div>
    <div class="map" v-if="config">
      <AMap
        v-if="config && config.identifier === 'Amap'"
        :clickMap="true"
        @locateChange="locateChange"
        :isWrite="true"
        :locate="state.locate"
        :config="config"
      />

      <Gis
        v-if="config && config.identifier === 'Gis'"
        :clickMap="true"
        @locateChange="locateChange"
        :isWrite="true"
        :locate="state.locate"
        :config="config"
      />
    </div>
  </div>
</template>

<script setup lang="ts">

import {mapAvailable} from '@/api/system/mapConfig'

import AMap from '@/components/MapSelect/modules/Amap.vue'

import Gis from '@/components/MapSelect/modules/Gis.vue'

import { propTypes } from '@/utils/propTypes'
import {useI18n} from 'vue-i18n'

const { t } = useI18n()
const emits = defineEmits(['update:modelValue'])

const config:any = ref(undefined)

const readonly = computed(()=>{
  return config.value !== undefined
})
const state = reactive({
  center : '' as any,
  locate: {} as any,
})
const props = defineProps({
  modelValue: propTypes.object.def({}),
  clickMap: propTypes.bool.def(false),
  isWrite: propTypes.bool.def(true),
})

const initMap = () => {
  state.locate = props.modelValue
  mapAvailable({})
    .then((res) => {
      if(res.data) {
        res.data.properties = JSON.parse(res.data.properties)
        config.value = res.data
      }
    })
}
const locateChange = (e:any) => {
  if (!e) return

  console.log(e)
  state.locate = { latitude: e.longitude, longitude: e.latitude}
  emits('update:modelValue', state.locate)
}

onMounted(() => {
  initMap()
})
</script>

<style scoped>
.mapContainer {
  width: 100%;
}

.map {
  margin-top: 10px;
  height: 240px;
}
</style>
